<template>
  <div class="div_box">
    <div class="header">
      <div class="header_left">
        <el-form
          :inline="true"
          ref="refSearchForm"
          class="search-form"
          size="small"
        >
          <el-form-item size="small">
            <el-select
              v-model="commandResult"
              filterable
              placeholder="指令结果"
              clearable
              @change="searchClick"
              style="width: 160px"
            >
              <el-option
                v-for="(item, i) in commandResultList"
                :key="i"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item size="small" class="search-button">
                        <el-button size="small" @click="searchClick" class="el_button" :loading="loadingSearch">查询
                        </el-button>
                        <el-button class="el_button" size="small" @click="resetClick" :loading="loadingReset">重置</el-button>
                          </el-form-item> -->
        </el-form>
      </div>
      <div class="header_right"></div>
    </div>
    <div class="content">
      <el-table
        :data="dataList"
        class="table"
        height="320"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
          height="30"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="serviceType"
          label="操作名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
            align="center"
            prop="serviceType"
            label="服务标识"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="serviceValue"
            label="服务值"
            show-overflow-tooltip
          >
          </el-table-column> -->
        <el-table-column
          align="center"
          prop="createUsername"
          label="操作人"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="serviceValue"
          label="服务值"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="commandResult"
          label="指令结果"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <el-tag type="success" size="mini" v-if="row.commandResult == 1"
              >执行成功</el-tag
            >
            <el-tag type="danger" size="mini" v-if="row.commandResult == 2"
              >执行失败</el-tag
            >
            <el-tag type="warning" size="mini" v-if="row.commandResult == 3"
              >待下发</el-tag
            >
            <el-tag type="danger" size="mini" v-if="row.commandResult == 4"
              >下发失败</el-tag
            >
            <el-tag type="success" size="mini" v-if="row.commandResult == 5"
              >已下发</el-tag
            >
            <el-tag type="success" size="mini" v-if="row.commandResult == 6"
              >已送达</el-tag
            >
            <el-tag type="info" size="mini" v-if="row.commandResult == 7"
              >已取消</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="createTime"
          label="下发时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="取消"
              placement="bottom"
              v-if="scope.row.commandResult == 3"
            >
              <i
                @click="delClick(scope.row)"
                class="iconfont xianshi_quxiao tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @pagination="CommandPage"
        class="pagination"
      >
      </pagination>
    </div>

    <commandService
      ref="refcommandService"
      :deviceInfo="deviceInfo"
      :CommandInfo="CommandInfo"
    ></commandService>
  </div>
</template>

<script>
import {
  reqRemove,
  reqCommandPage,
  reqCommandServicePage,
  reqCommand,
  reqAddSoundLightVoiceAlarm,
} from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
// import commandService from "./commandService.vue"; //指令下发
import commandService from "@/views/deviceList/terminal/components/commandService.vue"; //指令下发

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
    identifier: {
      type: String,
      default: () => "",
    },
    serviceType: {
      type: String,
      default: () => "",
    },
    serviceValue: {
      type: String,
      default: () => "",
    },
  },
  components: {
    Pagination,
    commandService,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
      CommandInfo: [],
      commandResult: "",
      commandResultList: [
        {
          id: 1,
          name: "执行成功",
        },
        {
          id: 2,
          name: "执行失败",
        },
        {
          id: 3,
          name: "待下发",
        },
        {
          id: 4,
          name: "下发失败",
        },
        {
          id: 5,
          name: "已下发",
        },
        {
          id: 6,
          name: "已送达",
        },
        {
          id: 7,
          name: "已取消",
        },
      ],
      loadingSearch: false, //查询按钮loading
      loadingReset: false, //重置按钮loading
      timeDevice1: "", //时间开始
      timeDevice2: "", //时间结束
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 选当前时间之后的时间
        },
      },
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    async delClick(row) {
      const result = await this.$confirm(
        "此操作将取消下发指令, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqRemove(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("取消下发指令成功！");
      this.CommandPage();
    },
    async submit(e) {
      const result = await this.$confirm(
        "此操作将对该设备进行消音下发，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqCommand({
        serviceType: this.serviceType,
        serviceValue: this.serviceValue,
        imei: this.deviceInfo.imei || this.deviceInfo.deviceCode,
        deviceId: this.deviceInfo.deviceId,
        identifier: this.identifier,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("消音下发成功！");
      setTimeout(() => {
        this.CommandPage();
      }, 1000);
    },
    async addClick() {
      const res = await reqCommandServicePage(1, 50, {
        productModel: this.deviceInfo.classMark,
        protocol: this.deviceInfo.protocol,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      if (res.data.total == 0)
        return this.$modal.notifyWarning("没有可下发的指令");
      this.CommandInfo = JSON.parse(JSON.stringify(res.data.rows));
      this.$refs.refcommandService.dialogVisible = true;
    },
    // 指令列表
    async CommandPage() {
      const res = await reqCommandPage(this.page, this.limit, {
        commandResult: this.commandResult,
        serviceType: "",
        imei: this.deviceInfo.imei || this.deviceInfo.deviceCode,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.CommandPage();
    },
    // 重置
    async resetClick() {
      this.commandResult = "";
      this.page = 1;
      this.limit = 10;
      this.CommandPage();
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.CommandPage();
    },
  },
  deactivated() {},
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
.div_box {
  height: 100%;
  overflow: auto;
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;

  .header_left {
    height: 100%;
    display: flex !important;
    align-items: flex-start !important;
  }

  .header_right {
    height: 100%;
    margin-top: 5px;
  }

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    .label {
      margin: 0 10px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}
.content {
  height: 100%;
}
</style>
